1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
"use client";
import styles from "./info.module.css";
import { useState } from "react";
import { fetch_video_link } from "../videoLinkfetcher";
import { MediaPlayer, MediaProvider } from "@vidstack/react";
import "@vidstack/react/player/styles/base.css";
import "@vidstack/react/player/styles/plyr/theme.css";
import {
PlyrLayout,
plyrLayoutIcons,
} from "@vidstack/react/player/layouts/plyr";
import { storeLocal } from "../history/storeData";
export default function Button({ data2: info }) {
const currentDate = new Date();
const [videoLink, setVideoLink] = useState(null);
async function video(id) {
const link = await fetch_video_link(id);
if (link === undefined) {
alert("Sorry, but not links were found");
} else {
setVideoLink(link);
}
}
function store_to_local(name, image, episode, id) {
let newData = {
name: name,
image: image,
episode: episode,
id: id,
type: "anime",
date: `${currentDate.getDate()}-${String(
currentDate.getMonth() + 1
).padStart(2, "0")}`,
time: `${currentDate.getHours()}:${String(
currentDate.getMinutes()
).padStart(2, "0")}`,
};
storeLocal(newData);
}
return (
<main>
<h2 className={styles.buttonHeader}>Episodes: </h2>
<div className={styles.buttonContainer}>
{info &&
info.episodes &&
info.episodes.map((item, index) => (
<button
className={styles.dramaButton}
key={index}
onClick={(event) => {
event.target.style.backgroundColor =
"var(--soft-purple)";
video(item.id);
store_to_local(
info.title,
info.image,
item.number,
info.id
);
}}
>
{item.number}
</button>
))}
</div>
{videoLink && (
<div
className={styles.videoPopUp}
id="popup"
onKeyDown={(event) => {
if (event.code === "Escape") {
setVideoLink("");
}
}}
>
<div className={styles.video}>
<MediaPlayer
title="dramaPlayer"
src={videoLink}
aspectRatio="16/9"
load="eager"
className={styles.VideoPlayer}
playsInline
id="videoPlayer"
volume={0.2}
onQualityChange={(event) =>
console.log("changed qualities", event)
}
>
<MediaProvider />
<PlyrLayout icons={plyrLayoutIcons} />
</MediaPlayer>
<button
className={styles.closeButton}
onClick={() => {
setVideoLink("");
}}
>
Close
</button>
</div>
</div>
)}
</main>
);
}
|